<template>
	<div>
		<div class="back">
			<!-- 导航 -->
			<div class="width_1200">
				<div class="nav">
					<div class="nav_item">
						<div class="nav_buy">
							<div class="nav_buy_name">购买</div>
							<div class="nav_buy_link">
								<div class="nav_buy_link_item" :class="{'nav_buy_link_active':$store.state.otc.currentData.index==index&&$store.state.otc.currentData.type==1}" v-for="(item,index) in $store.state.otc.buyArr" :key="index" @click="onTab(item,index)">{{item.currencyName}}</div>
							</div>
						</div>
						<div class="nav_buy nav_border">
							<div class="nav_buy_name">出售</div>
							<div class="nav_buy_link">
								<div class="nav_buy_link_item" :class="{'nav_buy_link_active':$store.state.otc.currentData.index==index&&$store.state.otc.currentData.type==0}" v-for="(item,index) in $store.state.otc.sellArr" :key="index" @click="onTab(item,index)">{{item.currencyName}}</div>
							</div>
						</div>
					</div>
					<div class="nav_item">
						<div class="nav_search transition_6">
							<div class="nav_search_main">
								<div class="nav_search_block transition_6"  @click="onFormToggle">{{currentDataName('countries','countriesArr')}}</div>
								<div class="nav_search_block transition_6"  @click="onFormToggle">{{currentDataName('currency','currencyArr')}}</div>
								<div class="nav_search_block transition_6"  @click="onFormToggle">{{currentDataName('pay','payArr')}}</div>
								<div class="nav_search_block transition_6" v-show="money!==''">
									<div class="nav_search_block_name" @click="onFormToggle">{{money}}</div>
									<div class="nav_search_block_del" @click="onNavDel"></div>
								</div>
								<div class="nav_search_icon fa fa-navicon" @click="onFormToggle"></div>
							</div>
							<div class="page_bg" v-show="$store.state.otc.isForm" @click="$store.commit('otc/onAllBaseCommit',{value:false,name:'isForm'})"></div>
							<!-- 弹框 -->
							<transition name="slide-fade">
								<div class="nav_search_alert" v-show="$store.state.otc.isForm">
									<div class="nav_search_alert_content">
										<div class="nav_search_alert_content_name">国家</div>
										<div class="nav_search_alert_content_form">
											<el-select v-model.trim="countries" placeholder="请选择" size="small" class="width_100">
											    <el-option
											      v-for="(item,index) in $store.state.otc.formData.countriesArr"
											      :key="index"
											      :label="item.name"
											      :value="item.id">
											    </el-option>
											  </el-select>
										</div>
									</div>
									<div class="nav_search_alert_content">
										<div class="nav_search_alert_content_name">法币币种</div>
										<div class="nav_search_alert_content_form">
											<el-select v-model.trim="currency" placeholder="请选择" size="small" class="width_100">
											    <el-option
											      v-for="(item,index) in $store.state.otc.formData.currencyArr"
											      :key="index"
											      :label="item.name"
											      :value="item.id">
											    </el-option>
											  </el-select>
										</div>
									</div>
									<div class="nav_search_alert_content">
										<div class="nav_search_alert_content_name">支付方式</div>
										<div class="nav_search_alert_content_form">
											<el-select v-model.trim="pay" placeholder="请选择" size="small" class="width_100">
											    <el-option
											      v-for="(item,index) in $store.state.otc.formData.payArr"
											      :key="index"
											      :label="item.name"
											      :value="item.id">
											    </el-option>
											  </el-select>
										</div>
									</div>
									<div class="nav_search_alert_content">
										<div class="nav_search_alert_content_name">金额</div>
										<div class="nav_search_alert_content_form">
											<el-input
											  placeholder="请输入内容"
											  v-model.trim="money"
											  size="small"
											  class="width_100"
											  clearable>
											</el-input>
										</div>
									</div>
									<div class="nav_search_btn">
										<el-button type="text" size="small" class="nav_search_cancel" @click="$store.commit('otc/onAllBaseCommit',{value:false,name:'isForm'})">取消</el-button>
										<el-button type="primary" size="small" @click="onConfirm">确定</el-button>
									</div>
								</div>
							</transition>
						</div>
					</div>
				</div>
			</div>
			<!-- 内容 -->
			<div class="content">
				<div class="width_1200">
					<div class="content_box content_title">
						<div class="content_item" v-for="(item,index) in $store.state.otc.tableTableArr" :key="index" :class="[{'content_prop':index==0},{'content_right':index==$store.state.otc.tableTableArr.length-1}]">{{item.name}}</div>
					</div>
				</div>
				<!-- base -->
				<div v-for="(item,index) in $store.state.otc.tableArr">
					<div class="width_1200" v-show="!($store.state.otc.tableToggleIndex==index&&$store.state.otc.tableToggleIsToggle)">
						<div class="content_box">
							<div class="content_item content_prop">
								<div class="content_head_image" :style="'background-color:'+$store.state.otc.colorArr[index%$store.state.otc.colorArr.length]">
									<span>饭</span>
									<div class="content_head_icon"></div>
								</div>
								<div class="content_head_name">{{item.name}} ({{item.number}} | {{item.rate*100}}%)</div>
							</div>
							<div class="content_item">{{item.money}} BTC</div>
							<div class="content_item">{{item.min}}-{{item.max}} CNY</div>
							<div class="content_item content_price">{{item.price}} CNY</div>
							<div class="content_item">
								<div class="content_pay">
									<img class="content_pay_img" src="~/assets/images/zh-bank.svg" alt="">
									<img class="content_pay_img" src="~/assets/images/alipay.svg" alt="">
									<img class="content_pay_img" src="~/assets/images/wechat.svg" alt="">
								</div>
							</div>
							<div class="content_item content_right">
								<el-button type="primary" size="small" @click="onOperation(item,index,true)" :loading="$store.state.otc.tableToggleIndex===index">购买/出售</el-button>
							</div>
						</div>
					</div>
					<!-- senir -->
					<div class="senir" v-show="$store.state.otc.tableToggleIndex===index&&$store.state.otc.tableToggleIsToggle">
						<div class="width_1200">
							<div class="senir_main">
								<div class="content_head_image" :style="'background-color:'+$store.state.otc.colorArr[0%$store.state.otc.colorArr.length]">
									<span>饭</span>
									<div class="content_head_icon"></div>
								</div>
								<div class="senir_box">
									<div class="senir_top">
										<div class="senir_top_left">
											<div class="senir_top_item">
												<div class="senir_top_name content_head_name">FullCoin (1606 | 99%)</div>
												<div class="senir_top_number">数量 7.980623 BTC</div>
											</div>
											<div class="senir_top_item">
												<div class="senir_top_name content_price">45,029.00 CNY</div>
												<div class="senir_top_number">10,004-359,359 CNY</div>
											</div>
										</div>
										<div class="senir_top_right">
											<div class="senir_top_right_box">
												<div class="senir_inputs transition_6">
													<input type="text" class="senir_input">
													<div class="senir_input_item senir_input_unit">CNY</div>
													<div class="senir_input_item senir_input_all" @click="onInputAll">全部</div>
												</div>
												<div class="senir_top_bothway fa fa-exchange"></div>
												<div class="senir_inputs transition_6">
													<input type="text" class="senir_input">
													<div class="senir_input_item senir_input_unit">BTC</div>
													<div class="senir_input_item senir_input_all" @click="onInputAll">全部</div>
												</div>
												<el-button type="warning" size="small" class="btn_order">下单</el-button>
												<el-button type="text" size="small" class="nav_search_cancel" @click="onOperation(item,index,false)">取消</el-button>
											</div>
										</div>
									</div>
									<div class="senir_pay">
										<div class="senir_pay_way">
											<div class="senir_pay_way_item">
												<img src="~/assets/images/wechat.svg" alt="" class="senir_pay_way_icon">
												<div class="senir_pay_way_name">微信支付</div>
											</div>
											<div class="senir_pay_way_item">
												<img src="~/assets/images/alipay.svg" alt="" class="senir_pay_way_icon">
												<div class="senir_pay_way_name">支付宝支付</div>
											</div>
										</div>
										<div class="senir_pay_tips">买方付款时限为15分钟</div>
									</div>
									<div class="senir_note">
										<div class="senir_note_title">商家备注：</div>
										<div class="senir_note_content">
											非实名打款不退款不放币！30日成交笔数超过50的勿拍！否则申诉处理不予放行，谢谢合作。
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		    <!-- 分页 -->
		    <div class="otc_paging">
		  	  <el-pagination
		  	  background
		  	  :current-page="$store.state.otc.currentPage"
		  	  layout="prev, pager, next"
		  	  @current-change="onChangePaging"
		  	  :total="$store.state.otc.allPage">
		  	  </el-pagination>
		    </div>
		</div>
	</div>
</template>

<script>
export default {
	name:'otc',
	transition: 'page',
	data(){
		return {}
	},
	methods:{
		onOperation(item,index,judge){
			if(judge){
				this.$store.commit('otc/onAllBaseCommit',{value:index,name:'tableToggleIndex'})
				setTimeout(()=>{
					this.$store.commit('otc/onAllBaseCommit',{value:!this.$store.state.otc.tableToggleIsToggle,name:'tableToggleIsToggle'})
				},1000)
			}else{
				this.$store.commit('otc/onAllBaseCommit',{value:'',name:'tableToggleIndex'})
				this.$store.commit('otc/onAllBaseCommit',{value:!this.$store.state.otc.tableToggleIsToggle,name:'tableToggleIsToggle'})
			}
		},
		onInputAll(){
			console.log('all');
		},
		onFormToggle(){
			this.$store.commit('otc/onAllBaseCommit',{value:!this.$store.state.otc.isForm,name:'isForm'})
		},
		onTab(item,index){
			console.log(item,index)
			this.$store.commit('otc/onAllBaseCommit',{value:{
				index,
				...item,
			},name:'currentData'})
		},
		// 确定
		onConfirm(){
			const data = this.$store.state.otc;
			console.log(data)
			this.$store.commit('otc/onAllBaseCommit',{value:false,name:'isForm'})
			console.log(111)
		},
		// 当前状态显示
		currentDataName(curName,arrName){
			const arr = this.$store.state.otc.formData[arrName];
			const id = this.$store.state.otc[curName]
			const curObj = arr.filter(item=>{
				return item.id==id
			})[0]
			return curObj.name
		},
		onNavDel(){
			this.$store.commit('otc/onAllBaseCommit',{value:'',name:'money'})
		},
		onChangePaging(val){
			this.$store.commit('otc/onAllBaseCommit',{value:val,name:'currentPage'})
		},
	},
	computed:{
		countries:{
			get(){
				return this.$store.state.otc.countries;
			},
			set(value){
				this.$store.commit('otc/onAllBaseCommit',{value,name:'countries'});
			}
		},
		currency:{
			get(){
				return this.$store.state.otc.currency;
			},
			set(value){
				this.$store.commit('otc/onAllBaseCommit',{value,name:'currency'});
			}
		},
		pay:{
			get(){
				return this.$store.state.otc.pay;
			},
			set(value){
				this.$store.commit('otc/onAllBaseCommit',{value,name:'pay'});
			}
		},
		money:{
			get(){
				return this.$store.state.otc.money;
			},
			set(value){
				this.$store.commit('otc/onAllBaseCommit',{value,name:'money'});
			}
		},
	},
	created(){
	}
}
</script>
<style scoped>
@import url("~/assets/css/pages/index/otc.css");
</style>